<template>
	<view class="main-container">
		<!-- 顶部标题栏 -->
		<image src="/static/back.png" mode="" class="back"></image>
		<view class="header">
			<image src="/static/logo.png" class="logo" mode="aspectFit" />
			<text class="title">睿聪中学管理系统</text>
			<view class="user-info">
				<view class="time-info">
					<text class="iconfont icon-time"></text>
					<text>{{ currentTime }}</text>
				</view>
				<view class="user-name">
					<text class="iconfont icon-user"></text>
					<text>{{ userName }}老师</text>
				</view>
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="content">
			<!-- 随机点名卡片 -->
			<view class="card roll-call-card" @click="navigateTo('/pages/rollCall/rollCall')">
				<view class="card-bg"></view>
				<view class="card-content">
					<view class="card-icon">
						<text class="iconfont icon-random"></text>
					</view>
					<text class="card-title">课堂随机点名</text>
					<view class="name-display">
						<text class="iconfont icon-arrow-right"></text>
						<text>点击进入点名系统</text>
					</view>
					<view class="student-count">
						<text class="iconfont icon-group"></text>
						<text>班级人数: 40</text>
					</view>
				</view>
				<view class="card-hover-effect"></view>
				<view class="card-corner"></view>
			</view>

			<!-- 跑操出勤卡片 -->
			<view class="card attendance-card" @click="navigateTo('/pages/attendance/attendance')">
				<view class="card-bg"></view>
				<view class="card-content">
					<view class="card-icon">
						<text class="iconfont icon-checklist"></text>
					</view>
					<text class="card-title">跑操出勤记录</text>
					<view class="attendance-info">

						<view class="attendance-item">
							<text class="iconfont icon-close-circle"></text>
							<text>缺席人数</text>
							<text class="absence-count">4</text>
						</view>
					</view>
					<view class="attendance-date">
						<text class="iconfont icon-calendar"></text>
						<text>{{ currentDate }}</text>
					</view>
				</view>
				<view class="card-hover-effect"></view>
				<view class="card-corner"></view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="footer">
			<text>睿聪中学 © 2025 版权所有</text>
			<text class="designer">Designed by lihuazhi</text>
		</view>

		<!-- 背景装饰元素 -->
		<view class="bg-circle circle-1"></view>
		<view class="bg-circle circle-2"></view>
		<view class="bg-circle circle-3"></view>
		<view class="bg-circle circle-4"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTime: '',
				currentDate: '',
				userName: '张老师'
			}
		},
		onLoad() {
			this.updateTime()
			this.timer = setInterval(this.updateTime, 1000)
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			updateTime() {
				const now = new Date()
				this.currentTime = now.toLocaleTimeString('zh-CN', {
					hour12: false
				})
				this.currentDate = now.toLocaleDateString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					weekday: 'long'
				})
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.back {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	/* 基础样式 */
	.main-container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		/* background: linear-gradient(135deg, #2c3e50, #3498db); */
		background-size: 200% 200%;
		animation: gradientBG 15s ease infinite;
		position: relative;
		overflow: hidden;
		font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
		color: #fff;
	}

	@keyframes gradientBG {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	/* 头部样式 */
	.header {
		display: flex;
		align-items: center;
		padding: 20px 25px;
		position: relative;
		z-index: 10;
		flex-wrap: wrap;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(255, 255, 255, 0.1);
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.logo {
		width: 45px;
		height: 45px;
		margin-right: 15px;
		filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #fff;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		flex: 1;
		min-width: 200px;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		font-size: 14px;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
		margin-top: 5px;
	}

	.time-info,
	.user-name {
		display: flex;
		align-items: center;
		margin-bottom: 5px;
	}

	.time-info .iconfont,
	.user-name .iconfont {
		margin-right: 6px;
		font-size: 16px;
		color: rgba(255, 255, 255, 0.8);
	}

	/* 内容区域样式 */
	.content {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 25px;
		gap: 30px;
		flex-wrap: wrap;
		z-index: 5;
	}

	/* 卡片通用样式 */
	.card {
		width: 100%;
		max-width: 420px;
		min-width: 320px;
		height: 420px;
		border-radius: 25px;
		position: relative;
		overflow: hidden;
		cursor: pointer;
		transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
		margin: 15px;
	}

	.card:hover {
		transform: translateY(-8px) scale(1.02);
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
	}

	.card:hover .card-hover-effect {
		opacity: 1;
	}

	.card-bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid rgba(255, 255, 255, 0.25);
		z-index: 1;
	}

	.card-content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30px;
		color: #fff;
	}

	.card-icon {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	}

	.card-icon .iconfont {
		font-size: 40px;
		color: #fff;
	}

	.card-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 30px;
		text-align: center;
		text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
		position: relative;
	}

	.card-title::after {
		content: '';
		position: absolute;
		bottom: -10px;
		left: 50%;
		transform: translateX(-50%);
		width: 50px;
		height: 3px;
		background: rgba(255, 255, 255, 0.5);
		border-radius: 3px;
	}

	.card-hover-effect {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
		opacity: 0;
		transition: opacity 0.4s ease;
		z-index: 3;
	}

	.card-corner {
		position: absolute;
		width: 80px;
		height: 80px;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 50%;
		z-index: 1;
	}

	/* 点名卡片特殊样式 */
	.roll-call-card {
		background: linear-gradient(45deg, rgba(41, 128, 185, 0.8), rgba(109, 213, 237, 0.8));
	}

	.roll-call-card .card-corner {
		bottom: -30px;
		right: -30px;
	}

	.roll-call-card .name-display {
		flex: 1;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20px;
		text-align: center;
		margin: 20px 0;
		flex-direction: column;
	}

	.roll-call-card .name-display .iconfont {
		font-size: 30px;
		margin-bottom: 10px;
		opacity: 0.8;
	}

	.roll-call-card .student-count {
		width: 100%;
		text-align: center;
		padding: 12px;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 12px;
		font-size: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.roll-call-card .student-count .iconfont {
		margin-right: 8px;
		font-size: 18px;
	}

	/* 出勤卡片特殊样式 */
	.attendance-card {
		background: linear-gradient(45deg, rgba(142, 68, 173, 0.8), rgba(230, 126, 34, 0.8));
	}

	.attendance-card .card-corner {
		top: -30px;
		left: -30px;
	}

	.attendance-card .attendance-info {
		flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 30px;
		margin: 20px 0;
	}

	.attendance-card .attendance-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 20px;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 12px;
		font-size: 16px;
	}

	.attendance-card .attendance-item .iconfont {
		margin-right: 8px;
		font-size: 18px;
	}

	.attendance-card .attendance-rate {
		font-size: 26px;
		font-weight: bold;
		color: #4caf50;
		text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.attendance-card .absence-count {
		font-size: 26px;
		font-weight: bold;
		color: #f44336;
		text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	}

	.attendance-card .attendance-date {
		width: 100%;
		text-align: center;
		padding: 12px;
		background: rgba(255, 255, 255, 0.15);
		border-radius: 12px;
		font-size: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.attendance-card .attendance-date .iconfont {
		margin-right: 8px;
		font-size: 16px;
	}

	/* 底部样式 */
	.footer {
		padding: 15px;
		text-align: center;
		color: rgba(255, 255, 255, 0.7);
		font-size: 13px;
		z-index: 10;
		display: flex;
		flex-direction: column;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(255, 255, 255, 0.05);
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}

	.designer {
		margin-top: 5px;
		font-size: 12px;
		color: rgba(255, 255, 255, 0.5);
	}

	/* 背景装饰元素 */
	.bg-circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.05);
		z-index: 1;
	}

	.circle-1 {
		width: 300px;
		height: 300px;
		top: -100px;
		left: -100px;
		animation: float 15s ease-in-out infinite;
	}

	.circle-2 {
		width: 200px;
		height: 200px;
		bottom: -50px;
		right: -50px;
		animation: float 12s ease-in-out infinite reverse;
	}

	.circle-3 {
		width: 150px;
		height: 150px;
		top: 30%;
		right: -50px;
		animation: float 10s ease-in-out infinite;
	}

	.circle-4 {
		width: 100px;
		height: 100px;
		bottom: 20%;
		left: -30px;
		animation: float 8s ease-in-out infinite reverse;
	}

	@keyframes float {
		0% {
			transform: translate(0, 0) rotate(0deg);
		}

		50% {
			transform: translate(20px, 20px) rotate(180deg);
		}

		100% {
			transform: translate(0, 0) rotate(360deg);
		}
	}

	/* 响应式调整 */
	@media (max-width: 768px) {
		.header {
			padding: 15px;
		}

		.logo {
			width: 40px;
			height: 40px;
		}

		.title {
			font-size: 20px;
		}

		.user-info {
			font-size: 13px;
		}

		.card {
			height: 380px;
			min-width: 300px;
			margin: 10px;
		}

		.card-icon {
			width: 70px;
			height: 70px;
		}

		.card-icon .iconfont {
			font-size: 36px;
		}

		.card-title {
			font-size: 22px;
			margin-bottom: 25px;
		}

		.attendance-card .attendance-item {
			padding: 12px 15px;
			font-size: 15px;
		}

		.attendance-card .attendance-rate,
		.attendance-card .absence-count {
			font-size: 24px;
		}
	}

	@media (max-width: 480px) {
		.content {
			padding: 15px;
			gap: 20px;
		}

		.card {
			height: 360px;
			min-width: 280px;
			margin: 8px;
		}

		.card-content {
			padding: 25px;
		}

		.card-title {
			font-size: 20px;
		}

		.card-icon {
			width: 60px;
			height: 60px;
		}

		.card-icon .iconfont {
			font-size: 32px;
		}

		.attendance-card .attendance-item {
			padding: 10px 12px;
			font-size: 14px;
		}

		.attendance-card .attendance-rate,
		.attendance-card .absence-count {
			font-size: 22px;
		}
	}
</style>